<template>
  <div class="bg-[#232324]">
    <div
      class="flex items-center justify-center bg-[#ffffff1a] w-[260px] h-[40px] mx-auto border-gray-100 border-[1px]"
    >
      <span class="text-[14px] text-[#ccc] mx-[5px]">页面配置</span>
      <el-icon size="22" color="#ccc"><Monitor /></el-icon>
    </div>
    <el-form
      label-width="auto"
      :model="states"
      size="default"
      class="px-[10px]"
    >
      <el-form-item label="大屏分辨率" class="my-[10px]">
        <el-input disabled v-model="resolutionRatio" />
        <!-- <el-select

          v-model="resolutionRatio"
          placeholder="请选择"
          @change="changeRatio"
        >
          <el-option
            v-for="item in ratioOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select> -->
      </el-form-item>
      <!--  <el-form-item label="大屏宽度" class="my-[10px]">
        <el-input-number :max="4000" v-model="states.width" />
      </el-form-item>
      <el-form-item label="大屏高度" class="my-[10px]">
        <el-input-number :max="3000" v-model="states.height" />
      </el-form-item> -->
      <el-form-item label="背景颜色" class="my-[10px]">
        <el-color-picker
          v-model="states.backgroundColor"
          :predefine="predefineColors"
        />
      </el-form-item>
      <div>
        <div class="flex items-center mb-[10px]">
          <div class="mr-[20px] flex items-center">
            <div class="text-[white] text-[14px] cursor-default mr-[4px]">
              背景图片
            </div>

            <el-tooltip
              v-if="!userStore.ifLogin"
              effect="dark"
              content="背景图片需要登录后才能使用"
              placement="bottom"
            >
              <el-icon color="white"><WarningFilled /></el-icon>
            </el-tooltip>
          </div>

          <el-switch
            size="small"
            :disabled="!userStore.ifLogin"
            v-model="states.showBgImg"
            @change="changeShowBgImg"
          />
        </div>
        <BgChoose
          v-if="states.showBgImg && userStore.ifLogin"
          v-model:bgImg="states.backgroundImage"
        />
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from "vue";
import BgChoose from "@renderer/components/bgChoose/index.vue";
import { useUserStore } from "@renderer/store/modules/user";
let userStore = useUserStore();
const loading = ref(true);
const props = defineProps({
  models: {
    type: Object,
    default: () => ({}),
  },
});
let resolutionRatio = ref("1920*1080");

const changeShowBgImg = () => {
  // if (!showBgImg.value) {
  //   states.value.backgroundImage = "";
  // }
};
const predefineColors = ref(["#232324", "#18181c", "#100C2A"]);
const emit = defineEmits(["update:models"]);

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
    resolutionRatio.value = `${props.models.width}*${props.models.height}`;
  }, 200);
});

const states = computed({
  get: () => props.models,
  set: () => {
    // console.log("set!", states.value);
    return emit("update:models");
  },
});
</script>

<style scoped lang="scss">
:deep(.el-collapse-item__header) {
  padding-left: 10px !important;
}
:deep(.el-form-item__label) {
  color: #e9e9ea;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #232324;
}
</style>
